これから解説する自作関数「Main()」が、実際に画像を動かすJavaScriptとなります。
ここでは、まず最初にObj、Xs、Ys、Xe、Yeといった変数の値をブラウザごとに取得します。続いて、画像がブラウザ画面の端まできたときに、移動量（XX、YY）が乱数により変更されるような記述を追加します。あとは、画像の現在位置（X、Y）に移動量（XX、YY）を加えて、再表示させれば動く画像の完成です。
|
<SCRIPT language="JavaScript">
<!--
ID="FlyImg";
Xsize=40; Ysize=40;
Ns=document.getElementById;
Ie=document.all;
Obj="";
X=0; Y=0; Xs=0; Ys=0; Xe=0; Ye=0;
function Check(){
if(Ie || Ns){setInterval("Main()",100)}
}
function Main(){
//変数の取得
if (Ie){
Obj=document.all[ID].style;
Xs=document.body.scrollLeft;
Ys=document.body.scrollTop;
Xe=Xs+document.body.clientWidth-Xsize;
Ye=Ys+document.body.clientHeight-Ysize;
px="px";
}else if(Ns){
Obj=document.getElementById(ID).style;
Xs=pageXOffset;
Ys=pageYOffset;
Xe=Xs+innerWidth-Xsize;
Ye=Ys+innerHeight-Ysize;
px="px";
}
//移動量を決める
if(X<=Xs) XX=Math.floor(Math.random()*20)+10;
if(X>=Xe) XX=(Math.floor(Math.random()*20)+10)*(-1);
if(Y<=Ys) YY=Math.floor(Math.random()*20)+10;
if(Y>=Ye) YY=(Math.floor(Math.random()*20)+10)*(-1);
//移動後の位置
X=X+XX;
if(X<Xs){X=Xs}; if(X>Xe){X=Xe}
Y=Y+YY;
if(Y<Ys){Y=Ys}; if(Y>Ye){Y=Ye}
//描画
Obj.left=X+px;
Obj.top=Y+px;
}
//-->
</SCRIPT>
|
 |
- 変数Xe、Yeは、移動させる画像のサイズ（Xsize、Ysize）ぶんだけ差し引いて取得するようにします。
- 移動量（XX、YY）は、現在の画像位置（X、Y）がブラウザの四隅より外になった場合のみ変更するようにします。
- 移動量（XX、YY）の計算には、random()を利用し、四隅にぶつかるたびに移動量が変化するようにします。
- 移動後の位置は、現在の画像位置（X、Y）に移動量（XX、YY）を加えてやることにより算出できます。なお、移動後の位置がブラウザの四隅より外にはみださすことがないように、if文による修正を加えておくことを忘れないでください。
- 画像の移動（再描画）は、変数objのleftとtopを変更することにより実現されます。
|
